<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/font-awesome.min.css">
<title>学生宿舍管理系统</title>
<style type="text/css">
	html{
		height:100%;
	}
	body{
		height:100%;
	}
	.bigContainer{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
	}
	.leftContainer{
		width: 170px;
		height: 100%;
		border-right:1px solid #DDDDDD;
		box-shadow:0px 0px 5px 1px #DDDDDD;
	}
	.rightContainer{
		flex:auto;
		display: flex;
		flex-direction: column;
	}
	.my-top{
		flex:none;
		width:100%;
		height:50px;
		display:flex;
		flex-direction: row;
		position: relative;
	}
	.my-contant{
		flex:auto;
	}
	.my-bottom{
		flex:none;
		width:100%;
		height:30px;
		font-size: 14px;
		line-height: 15px;
		text-align: center;
	}
	.my-iframe{
		width:100%;
		height:100%;
		border:none;
	}
	.fade-enter-active, .fade-leave-active {
  		transition: width .5s;
	}
	.fade-enter, .fade-leave-to{
 	 	width: 0;
	}
</style>
<%
	if(session.getAttribute("USER")==null){
		response.sendRedirect("login.jsp");
	}
%>
</head>
<body>
	<script src="./js/jquery.slim.min.js"></script>
	<script src="./js/popper.min.js"></script>
	<script src="./js/bootstrap.min.js"></script>
	<script src="./layer/layer.js"></script>
	<script src="./js/sweetalert2.all.min.js"></script>
	<script src="./js/axios.min.js"></script>
	<script src="./js/vue.min.js"></script>
	<script src="./js/request.js"></script>
	<div id="app" class="bigContainer">
		<div class="leftContainer" v-show="navShow">
			<div style="height:70px;line-height:70px;" class="text-center">
				<img src="img/xmbz.jpg" style="height:24px;" class="align-middle"/>
				<span style="font-size:24px;font-family: 楷体;font-weight:bold;"  class="align-middle text-secondary">宿舍管理</span>
			</div>
			<div class="list-group" id="my-menu">
			  <a href="#" data-toggle="collapse" data-target="#my-secutiry" class="list-group-item list-group-item-action border-0">安全管理</a>
			  	<div id="my-secutiry" class="list-group collapse" data-parent="#my-menu">
				  <a href="#" @click="chooseMenu('安全管理','密码修改')" class="list-group-item list-group-item-action border-0 pl-5">密码修改</a>
				  <a href="dep.jsp"target="iframe" @click="chooseMenu('安全管理','管理员管理')" class="list-group-item list-group-item-action border-0 pl-5">管理员管理</a>
				</div>
			  <a href="#" data-toggle="collapse" data-target="#my-emp" class="list-group-item list-group-item-action border-0">学生信息</a>
			  	<div id="my-emp" class="list-group collapse" data-parent="#my-menu">
				  <a href="#" @click="chooseMenu('学生信息','宿舍管理')" class="list-group-item list-group-item-action border-0 pl-5">宿舍管理</a>
				  <a href="#" @click="chooseMenu('学生信息','学生管理')" class="list-group-item list-group-item-action border-0 pl-5">学生管理</a>
				</div>
			</div>
		</div>
		<div class="rightContainer">
			<div class="my-top bg-light">
				<button @click="switchNav" type="button" class="btn btn-light ml-2 my-1 "><i class="fa fa-bars"></i></button>
				<nav>
			  		<ol class="breadcrumb bg-light">
			    		<li class="breadcrumb-item"><a href="#">主页</a></li>
			    		<li v-if="currentMenu.one" class="breadcrumb-item"><a href="#">{{currentMenu.one}}</a></li>
			   		 	<li v-if="currentMenu.two" class="breadcrumb-item active">{{currentMenu.two}}</li>
			  		</ol>
				</nav>
				<div style="position:absolute;right:10px;bottom:15px;font-size:14px;">
					<span>当前管理员：<%=session.getAttribute("USER") %></span>
					&nbsp;&nbsp;
					<a href="<%=request.getContextPath() %>/loginout.jsp"><i class="fa fa-sign-out" aria-hidden="true"></i></a>
				</div>
			</div>
			<div class="my-contant">
				<iframe class="my-iframe" name="iframe"></iframe>
			</div>
			<div class="my-bottom">
				<span>
					Copyright © 2018-2022 Team-Leader-Love.All rights reserved.
					<br>
					© 2018-2022 Team-Leader-Love.拥有所有版权
				</span>
			</div>
		</div>
	</div>
	
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
				navShow:true,
				currentMenu:{//当前选中的菜单
					one:'',
					two:''
				}
			},
			methods:{
				switchNav(){
					//本函数将变量navShow的值取反
					this.navShow = !this.navShow;			
				},
				//选中菜单
				chooseMenu(one,two){
					this.currentMenu = {one,two};
				}
			}
		})
	</script>
</body>
</html>